// 首页
import LazyComponent from "@/utils/lazyLoad.jsx"
import { Carousel } from 'antd';
import "./index.less"
import HotProductCard from "./components/hot_product.jsx";

const imgArr = [
    {
        image1: await import('@/assets/images/lunbo1-1.jpg'),
        image2: await import('@/assets/images/lunbo1-2.png'),
    }, {
        image1: await import('@/assets/images/lunbo2-1.jpg'),
        image2: null
    },
    {
        image1: await import('@/assets/images/lunbo3-1.jpg'),
        image2: await import('@/assets/images/lunbo3-2.png'),
    }
]

const carouselArr = imgArr.map((item, index) => {
    return (
        <div className="carousel_item" key={index}>
            <img src={item.image1.default} alt="" />
            {item.image2 && <img className="img2" src={item.image2.default} alt="" />}
        </div>
    )
})


export default function Home() {
    return (
        <div>
            {/* 轮播图 */}
            <LazyComponent lazyContent={
                <div>
                    <Carousel autoplay lazyLoad>
                        {carouselArr}
                    </Carousel>

                </div>
            } />

            {/* 热销产品 */}
            <div style={{
                marginTop: '80px',
            }}>
                <LazyComponent lazyContent={
                    <div className="hot_product">
                        <div className="title">热销产品</div>
                        {HotProductCard()}
                    </div>
                } />

            </div>

            <LazyComponent lazyContent={
                <div className="third_box">
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>

                </div>
            } />
            <LazyComponent lazyContent={
                <div className="forth_box">
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>
                    <h1>首页</h1>

                </div>
            } />


        </div>

    )
}